<template>
  <div class="bank-container ptop bgwhite">
    <m-header title="提现" :preventBack="true" @navback="$router.replace({path: '/bank/list'})">
      <span slot="right" clas="concat" @click="$router.push({path: '/bank/record'})">提现记录</span>
    </m-header>
    <div class="withdraw-info">
      <div class="info">
        <div class="username">用户名：{{accountData.name}}</div>
        <!-- <div class="allmoney">账户余额：46,343.20元</div> -->
        <div class="allmoney">账户余额：{{accountData.balance || 0}}元</div>
      </div>
      <div class="bankinfo">
        <div class="infos">
          <div class="name">姓名： {{accountData.name}}</div>
          <div class="bank">卡号： {{accountData.card_no | fmatcard}}</div>
          <!-- <div class="bank">卡号： 6217 **** **** **** 998</div> -->
          <div class="bankname">{{accountData.card_name}}</div>
          <div class="branchbank">{{accountData.account_branch}}</div>
        </div>
      </div>
      <div class="withdraw">
        <div class="text">提现金额</div>
        <div class="form">
          <div class="money">
            <input class="area" v-model="money" type="text" placeholder="提现金额至少20元">
          </div>
          <div class="pwd">
            <input class="area" v-model="password" type="password" placeholder="请输入6位数提现密码">
          </div>
        </div>
        <div class="btn" @click="handleWithdraw">确认提现</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  components: {},
  data () {
    return {
      money: '',
      password: '',
      accountData: {
        // account_branch: '杭州支行',
        // account_site: '定安路100号',
        // bank_id: '3',
        // card_name: '招商银行',
        // card_no: '6214835895312709',
        // create_time: '1550912745',
        // member_account_id: '3',
        // member_id: '1',
        // mobile: '0',
        // modify_time: '0',
        // name: '李四',
        // status: '1'
      }
    };
  },
  filters: {
    fmatcard (val) {
      if (val) {
        const reg = /^(\d{4})\d+(\d{4})$/;
        return val.replace(reg, '$1 **** **** **** $2');
      }
    }
  },
  mounted () {
    if (this.$route.query.accountId) {
      this.getAccountInfo(this.$route.query.accountId);
    } else {
      this.$vux.toast.text('获取用户提现信息失败');
    }
  },
  methods: {
    ...mapActions({
      getAccountDetailInfo: 'mine/getAccountDetailInfo',
      toWithdrawApply: 'mine/toWithdrawApply'
    }),
    getAccountInfo (accountId) {
      this.getAccountDetailInfo({ member_account_id: accountId }).then(res => {
        this.accountData = res || {};
      });
    },
    handleWithdraw () {
      if (!this.money) {
        this.$vux.toast.text('请输入提现金额');
        return false;
      } else if (!/^\d*$/gi.test(this.money)) {
        this.$vux.toast.text('提现金额必须为数字');
        return false;
      } else if (this.money < 20) {
        this.$vux.toast.text('提现金额至少20元');
        return false;
      }
      if (!this.password) {
        this.$vux.toast.text('请填写提现密码');
        return false;
      } else if (this.password.length !== 6) {
        this.$vux.toast.text('请输入6提现位密码');
        return false;
      }
      const params = {
        money: this.money * 100,
        password: this.password,
        member_account_id: this.accountData.member_account_id
      }
      this.toWithdrawApply(params).then(res => {
        if (res) {
          this.$router.push({ path: '/bank/status' });
        }
      })
      // let withdrawStatus = true;
      // if (withdrawStatus) {
      //   this.$router.push({ path: '/bank/status' });
      // }
    }
  }
};
</script>
<style lang="less" scoped>
.bank-container {
  background: #f7f7f7;
  .withdraw-info {
    padding: 0 0.2rem;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.66rem;
      font-size: 0.24rem;
      color: #666666;
      .username {
      }
      .allmoney {
      }
    }
    .bankinfo {
      margin: 0 0.1rem 0.4rem;
      height: 3.48rem;
      box-sizing: border-box;
      background-image: url("../../../assets/imgs/mine/bank@2x.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
      .infos {
        display: inline-block;
        position: relative;
        top: 0.7rem;
        left: 0.46rem;
        div {
          line-height: 0.4rem;
          margin-bottom: 0.16rem;
          font-size: 0.28rem;
          color: #ffffff;
          letter-spacing: 0.02rem;
        }
        .name {
        }
        .bank {
          letter-spacing: 0.0133rem;
        }
        .bankname {
        }
        .branchbank {
        }
      }
    }
    .withdraw {
      .text {
        line-height: 0.4rem;
        margin-bottom: 0.12rem;
        font-size: 0.28rem;
        color: #666666;
      }
      .form {
        .area {
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          font-size: 0.28rem;
          padding: 0.2rem 0 0.2rem 0.78rem;
          background: #ffffff;
          border: 0.01rem solid #d2d2d2;
          border-radius: 0.06rem;
          box-sizing: border-box;
          &::-webkit-input-placeholder {
            font-size: 0.24rem;
            color: #999999;
          }
        }
        .money {
          margin-bottom: 0.2rem;
          position: relative;
          &::before {
            content: "￥";
            display: block;
            position: absolute;
            top: 0.26rem;
            left: 0.28rem;
            font-size: 0.32rem;
            color: #d44743;
          }
        }
        .pwd {
          position: relative;
          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0.26rem;
            left: 0.3rem;
            width: 0.28rem;
            height: 0.28rem;
            background-image: url("../../../assets/imgs/mine/lock@2x.png");
            background-size: 0.28rem 0.28rem;
            background-repeat: no-repeat;
          }
        }
      }
      .btn {
        height: 1rem;
        line-height: 1rem;
        margin: 0.6rem 0.5rem;
        background: #d44743;
        border-radius: 0.06rem;
        font-size: 0.34rem;
        color: #ffffff;
        text-align: center;
      }
    }
  }
}
</style>
